<template>
  <div>
    <el-card class="card">
      <el-descriptions title="考试安排" direction="vertical" :column="4" size="large" :span="2" border></el-descriptions>

      <el-table class="courses-table" :data="coursesList" border>
        <el-table-column prop="courseName" label="课程名" />
        <el-table-column prop="status" label="授课状态" >
          <template #default="{ row }">
            <span v-if="row.status == 0">未结课</span>
            <span v-else="row.status == 1">已结课</span>
          </template>
        </el-table-column>
        <el-table-column prop="examTime" label="考试日期">
          <template #default="scope">
            <span v-if="scope.row.status === 0" style="color: #888">暂无考试安排</span>
            <span v-else>{{ scope.row.examTime }} | {{ scope.row.startTime }} - {{ scope.row.endTime }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="control" label="操作">
          <template #default="scope">
            <el-button :disabled="scope.row.status === 0" @click="submitDialogFormVisible(scope.row.id)">考试安排</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog v-model="dialogFormVisible" title="考试安排" style="width: 30%; margin-top: 20%" >
      <el-form>
        <el-form-item label="考试日期:" style="width: 60%; margin: 0 auto">
          <el-input v-model="arrangeExamItem.examTime" autocomplete="off" />
        </el-form-item>
        <el-form-item label="开始时间:" style="width: 60%; margin: 0 auto">
          <el-input v-model="arrangeExamItem.startTime" autocomplete="off" style="margin-top: 2%;"/>
        </el-form-item>
        <el-form-item label="结束时间:" style="width: 60%; margin: 0 auto">
          <el-input v-model="arrangeExamItem.endTime" autocomplete="off"  style="margin-top: 2%;"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="arrange">提交</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import {onMounted, reactive, ref} from 'vue'
import {ArrangeExamItem, CourseItem} from "@/api/teacher/type";
import {arrangeExam, getAllCourses} from "@/api/teacher";
import {GET_TEACHER} from "@/utils/teacherInfo";
const coursesList = ref<CourseItem[]>()
const course = ref<CourseItem[]>()
const arrangeExamItem = reactive<ArrangeExamItem>({
  courseId: 1,
  examTime: '',
  startTime: '',
  endTime: ''
})

onMounted(async () => {
  await getAllTeacherCourses()
})
//教师查看所授课程
const getAllTeacherCourses = async () => {
  try {

    const { data } =await getAllCourses(GET_TEACHER().id)
    coursesList.value = data
  } catch (error) {
    await Promise.reject(error)
  }
}
//显示考试
const dialogFormVisible = ref(false)
const submitDialogFormVisible = async (courseId:number) => {
  arrangeExamItem.courseId = courseId
  dialogFormVisible.value = true
}

//安排考试
const arrange = async () => {
  try {

    const { data } = await arrangeExam(arrangeExamItem)
      console.log('1111', data)
      course.value = data
    dialogFormVisible.value = false
    await getAllTeacherCourses()
  } catch (error) {
    await Promise.reject(error)
  }
}
</script>

<style scoped>
.card {
  margin: 1% auto 0;
  width: 90%;
  opacity: 0.9;
}
.courses-table {
  width: 90%;
  margin-top: 20px;
  margin-left: 5%;
}
.block {
  margin-left: 10px;
}
.demo-time-range {
  margin-top: -32px;
  margin-left: 32%;
}
</style>
